<template>
  <div id="lefthree" style="display:inline-block">
    <div ref="chart3" class="echars-three"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "lefthree",
  components: {},
  data() {
    return {
      option3: {
					color: ["#F8F759", "#597B5F", "#A2519B", "#3F63B6", "#D68660"],
					grid: {
						left: '5%',
						top: '10%',
						right: '5%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							color: '#fff',
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#fff'
							}
						},
						data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: '#fff',
						},
					},
					legend: {
						bottom: '3%',
						right: "5%",
						textStyle: {
							fontSize: 14,
							color: '#fff'
						},
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					series: [{
						name: '电压',
						type: 'bar',
						stack: 'Ad',
						barWidth: 50,
						data: [16, 8, 12, 16, 8, 13, 13],
					}, {
						name: '电流',
						type: 'bar',
						stack: 'Ad',
						data: [0, 0, 0, 0, 0, 0, 0],
					}, {
						name: '温度',
						type: 'bar',
						stack: 'Ad',
						data: [0, 0, 0, 0, 0, 0, 0],
					}, {
						name: '噪音',
						type: 'bar',
						stack: 'Ad',
						data: [0, 0, 0, 0, 0, 0, 0],
					}, {
						name: '气压',
						type: 'bar',
						stack: 'Ad',
						data: [0, 0, 0, 0, 0, 0, 0],
					}]
				},
    };
  },
  mounted() {
    this.initChart3();
  },
  methods:{
    initChart3() {
				let chartDom = this.$refs.chart3;
				let myChart = echarts.init(chartDom);
				myChart.setOption(this.option3);
			}
  }
};
</script>

<style lang="less">
 .echars-three{
   height: 320px;
   width: 720px;
 }
</style>
